<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>我的订单</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bettery/css/life.css?v=192">
<script type="text/javascript" src="${pageContext.request.contextPath}/dewei/js/jquery.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/bettery/js/template.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bettery/js/iscroll5.js"></script>
</head>
<body onload="loaded()">
	<div class='search_bar'>
		<span>订单信息</span>
		<input type="hidden" value="${wxid}" id="wxid"/>
	</div>
	<div id="wrapper">
			<div id="scroller">
				<div id="pullDown" class="ub ub-pc c-gra">  
                <div class="pullDownIcon"></div>  
                <div class="pullDownLabel">下拉刷新</div>  
                </div>  
			    
				<ul id="m1" class="rec_list_v2">
				
				</ul>
				
				<div id="pullUp" class="ub ub-pc c-gra">  
                <div class="pullUpIcon"></div>  
                <div class="pullUpLabel">上拉显示更多...</div>  
                </div> 
			</div>
	</div>	
	<script id="test" type="text/html">
			 {{each list as value i}}
				<li>
				   <div>
						<div style="">
							<span class="label1">订&nbsp;单&nbsp;号</span>：{{value.dingDanUid}}
						</div>
						<div>
							<span class="label1">一卡通卡号</span>：{{value.carNo}}
						</div>
                        {{each value.goods as good j}}
						<div>商品{{j+1}}</div>
						<div>
							<span class="label1">名称</span>：{{good.goodsName}}
						</div>
						<div>
							<span class="label1">数量</span>：{{good.num}}
						</div>
						<div>
							<span class="label1">单价</span>：{{good.price}}
						</div>
						<div>
							<span class="label1">品牌</span>：{{good.pinpai}}
						</div>
						<div>
							<span class="label1">型号</span>：{{good.guige}}
						</div>
						{{/each}}
						<div>
							<span class="label1">商品总价</span>：{{value.goodsPrice}}
						</div>
						{{if value.servicePrice}}
						<div>
							<span class="label1">服务费用</span>：{{value.servicePrice}}
						</div>
						{{/if}}
						<div>
							<span class="label1">订单总价</span>：{{value.allPrice}}
						</div>
                        <div>
                         <span class="label1">订单状态</span>：
						<a style="display: inline;color: red;"> 
						{{if '0' == value.state}}
{{if '1' == value.buyType}}代发货{{else}}未处理{{/if}}
						{{else if '1' == value.state}}
{{if '1' == value.buyType}}代收货{{else}}待提{{/if}}

						{{else if '2' == value.state}}
							完成
						{{else if '3' == value.state}}
							已作废
						{{else if '4' == value.state}}
							已超期
						{{else}}
							处理中
						{{/if}}
						</a>
                        </div>

					</div>
				</li>
			 {{/each}}
             {{if hasNext}}
			<li id="moreli" onclick="loadMore({{currentId}})" style="text-align:center;display:none;"> 加载更多 </li>
			 {{/if}}
		
		</script>		
		<script id="test2" type="text/html">
			 {{each list as value i}}
				<li>
				   <div>
						<div>
							<span class="label1">订&nbsp;单&nbsp;号</span>：{{value.dingDanUid}}
						</div>
						<div>
							<span class="label1">一卡通卡号</span>：{{value.carNo}}
						</div>
						{{each value.goods as good j}}
						<div>商品{{j+1}}</div>
						<div>
							<span class="label1">名称</span>：{{good.goodsName}}
						</div>
						<div>
							<span class="label1">数量</span>：{{good.num}}
						</div>
						<div>
							<span class="label1">单价</span>：{{good.price}}
						</div>
						<div>
							<span class="label1">品牌</span>：{{good.pinpai}}
						</div>
						<div>
							<span class="label1">型号</span>：{{good.guige}}
						</div>
						{{/each}}
						<div>
							<span class="label1">商品总价</span>：{{value.goodsPrice}}
						</div>
						{{if value.servicePrice}}
						<div>
							<span class="label1">服务费用</span>：{{value.servicePrice}}
						</div>
						{{/if}}
						<div>
							<span class="label1">订单总价</span>：{{value.allPrice}}
						</div>
                        <div>
                         <span class="label1">订单状态</span>：
						<a style="display: inline;color: red;"> 
						{{if '0' == value.state}}
{{if '1' == value.buyType}}代发货{{else}}未处理{{/if}}
						{{else if '1' == value.state}}
{{if '1' == value.buyType}}代收货{{else}}待提{{/if}}

						{{else if '2' == value.state}}
							完成
						{{else if '3' == value.state}}
							已作废
						{{else if '4' == value.state}}
							已超期
						{{else}}
							处理中
						{{/if}}
						</a></div>

					</div>
				</li>
			 {{/each}}
             {{if hasNext}}
			 <li id="moreli" onclick="loadMore({{currentId}})" style="text-align:center;display:none;"> 加载更多 </li>
			 {{/if}}
		</script>
		
		<script>
		var json =${json};
		if(null!=json&&json.success&&json.result.length>0){
		var data = {
			list: json.result,
			currentId:json.currentId,
			hasNext:json.hasNext
		};
		var html = template('test', data);
		document.getElementById('m1').innerHTML = html;
		}
		
		
		function loadMore(id){
		  $.getJSON("queryOrderDatas.do",
		  {
			id: id,
			wxid:$("#wxid").val()
		  }, function(json)
		  {
			if(null!=json&&json.success&&json.result.length>0){
			var data = {
				list: json.result,
				currentId:json.currentId,
				hasNext:json.hasNext
			};
			var html = template('test2', data);
			var ul=$("#moreli").parent();
			$("#moreli").remove();
			$(ul).append(html)
			}else{
				$("#moreli").remove();
			}
		  });
		}
		function refresh(){
		  $.getJSON("queryOrderDatas.do",
		  {
			  wxid:$("#wxid").val()
		  }, function(h)
		  {
			if(null!=h&&h.success&&h.result.length>0){
			 json=h;
			var data = {
				list: json.result,
				currentId:json.currentId,
				hasNext:json.hasNext
			};
			$("#m1").children().each(function(){$(this).remove();});
			var html = template('test', data);
			document.getElementById('m1').innerHTML = html;
			myScroll.refresh();  
			}
		  });
		}
var pullDownEl, pullDownL;  
      var pullUpEl, pullUpL;  
      var Downcount = 0 ,Upcount = 0;  
      var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  

	function pullDownAction () {
		    setTimeout(function() {  
            refresh();
            pullDownEl.removeClass('loading');  
            pullDownL.html('下拉显示更多...');  
            pullDownEl['class'] = pullDownEl.attr('class');  
            pullDownEl.attr('class','').hide();  
            myScroll.refresh();  
            loadingStep = 0;  
        }, 20); //0.02秒  
	}	
     function pullDownAction() {//下拉事件  
            setTimeout(function() {
            refresh();
            pullDownEl.removeClass('loading');  
            pullDownL.html('下拉显示更多...');  
            pullDownEl['class'] = pullDownEl.attr('class');  
            pullDownEl.attr('class','').hide();  
            myScroll.refresh();  
            loadingStep = 0;  
        }, 10); //0.02秒  
      } 
	function pullUpAction () {
		setTimeout(function () {
			$("#moreli").click();
			pullUpEl.removeClass('loading');  
            pullUpL.html('上拉显示更多...');  
            pullUpEl['class'] = pullUpEl.attr('class');  
            pullUpEl.attr('class','').hide();  
            myScroll.refresh();  
            loadingStep = 0;  
		}, 20);
	}
	

	function loaded() {
		pullDownEl = $('#pullDown');  
        pullDownL = pullDownEl.find('.pullDownLabel');  
        pullDownEl['class'] = pullDownEl.attr('class');  
        pullDownEl.attr('class','').hide();  
          
        pullUpEl = $('#pullUp');  
        pullUpL = pullUpEl.find('.pullUpLabel');  
        pullUpEl['class'] = pullUpEl.attr('class');  
        pullUpEl.attr('class','').hide();  
		
	myScroll = new IScroll('#wrapper',{
    probeType: 2,
	scrollbars: true,//有滚动条  
            mouseWheel: true,//允许滑轮滚动  
            fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果  
            bounce:true,//边界反弹  
            interactiveScrollbars:true,//滚动条可以拖动  
            shrinkScrollbars:'scale',// 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.  
            click: true ,// 允许点击事件  
            keyBindings:true,//允许使用按键控制  
            momentum:true// 允许有惯性滑动  
        });
	 //滚动时  
        myScroll.on('scroll', function(){  
            if(loadingStep == 0 && !pullDownEl.attr('class').match('flip|loading') && !pullUpEl.attr('class').match('flip|loading')){  
            if (this.y > 5) {  
                //下拉刷新效果  
                pullDownEl.attr('class',pullUpEl['class'])  
                pullDownEl.show();  
                myScroll.refresh();  
                pullDownEl.addClass('flip');  
                pullDownL.html('准备刷新...');  
                loadingStep = 1;  
            }else if (this.y < (this.maxScrollY - 5)) {  
                //上拉刷新效果  
                pullUpEl.attr('class',pullUpEl['class']);
                pullUpEl.show();
                myScroll.refresh();  
                pullUpEl.addClass('flip');  
                pullUpL.html('准备刷新...');  
                loadingStep = 1;
            }
            }
        });
        //滚动完毕  
        myScroll.on('scrollEnd',function(){  
            if(loadingStep == 1){
            if (pullUpEl.attr('class').match('flip|loading')){
                pullUpEl.removeClass('flip').addClass('loading');
                pullUpL.html('Loading...');
                loadingStep = 2;  
                pullUpAction();  
            }else if(pullDownEl.attr('class').match('flip|loading')){
                pullDownEl.removeClass('flip').addClass('loading');
                pullDownL.html('Loading...');  
                loadingStep = 2;
                pullDownAction();
            }
            }
        });  
      }
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		</script>
	</body>
</html>
